<template>
	<div class="leader-area">
    <div class="top-bar">
      <div class="title-con" >
        <mt-navbar v-model="selected"  refs="navTitle" class="navbar">
            <mt-tab-item :class="{'tab-item-leader':tableader}" id='1'>职能部门</mt-tab-item>
            <mt-tab-item :class="{'tab-item-leader':tableader}" id='2'>服务机构</mt-tab-item>
            <mt-tab-item :class="{'tab-item-leader':tableader}" id='3'>研究机构</mt-tab-item>
            <mt-tab-item :class="{'tab-item-leader':tableader}" id='4'>办事机构</mt-tab-item>
            <mt-tab-item :class="{'tab-item-leader':tableader}" id='5'>外派机构</mt-tab-item>
        </mt-navbar>
      </div>
      <div class="search-area">
          <i class="fenge-span icon-line"></i>
          <span @click='showSearch=true'>
            <img src="/static/imgs/search.png" alt="">
          </span>
      </div>
     
    </div>
    <v-down @click.native='dropDown'></v-down>
      
    <v-search-show v-if='showSearch'></v-search-show> 

      <mt-tab-container v-model="selected" :swipeable="true">
          <mt-tab-container-item id='1'>
            <v-person :response='response'></v-person>
          </mt-tab-container-item>
          <mt-tab-container-item id='2'>
            <v-person :response='response'></v-person>

          </mt-tab-container-item>
          <mt-tab-container-item id='3'>
            <v-person :response='response'></v-person>

          </mt-tab-container-item>
          <mt-tab-container-item id='4'>
            <v-person :response='response'></v-person>

          </mt-tab-container-item>
          <mt-tab-container-item id='5'>
            <v-person :response='response'></v-person>

          </mt-tab-container-item>
      </mt-tab-container>


      <!--<v-search :showSearch="showMask"></v-search>
      <mt-actionsheet
      cancel-text=""
      :actions="actions"
      v-model="sheetVisible"
      >
      </mt-actionsheet>-->
	</div>
</template>

<script>
import Vue from "vue";
import { Navbar, TabItem, TabContainer, TabContainerItem } from "mint-ui";
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);

import DownSel from "@/components/personal/downSel";
import searchShow from "@/components/personal/searchShow";
import personView from "@/components/personal/tab1view";
export default {
  name: "app",
  components: {
    MtNavbar: Navbar,
    "v-down": DownSel,
    "v-person": personView,
    "v-search-show": searchShow
  },
  data() {
    return {
      selected: "1",
      maskLabel: "",
      tableader: true,
      response: [],
      maskList: "",
      pageNum:1,
      pageSize:10,
      isLoadEnd:false,
      searchRecord:false,
      showMask: "",
      total: 0,
      showSearch: false,
      searchValue: ""
    };
  },
  created() {
    this.changeDatas();
    Bus.$on("showSearch", data => (this.showSearch = data));
    Bus.$on("searchValue", data => (this.searchValue = data));
    window.addEventListener("scroll",this.scrollFunc);
    console.log(this.searchValue, "searchValue");
  },
  watch: {
    selected(newValue, oldValue) {
      this.changeDatas(true);
    },
    maskLabel(newValue, oldValue) {
      this.changeDatas(false);
    },
    searchValue(newValue, oldValue) {
      this.changeDatas(false);
    }
  },
  computed: {
    selectedName() {
      let selected = this.selected,
        params = null;
      switch (selected) {
        case "1":
          params = "职能部门";
          break;
        case "2":
          params = "服务机构";
          break;
        case "3":
          params = "研究机构";
          break;
        case "4":
          params = "办事机构";
          break;
        case "5":
          params = "外派机构";
          break;
        default:
          break;
      }
      return params;
    }
  },
  methods: {
    dropDown() {
      this.showMask = true;
      Bus.$emit("showMask", this.showMask);
      this.Axios
        .Post(this.URL.getDeptListByType.url, {
          deptCategory: this.selectedName
        })
        .then(response => {
          this.maskList = response.data.datas;
          Bus.$emit("maskList", this.maskList);
        });
    },
    changeDatas(flag) {
      this.clearData();
      if (flag) {
        this.maskLabel = "";
        Bus.$emit("maskLabel", this.maskLabel);
      } else {
        Bus.$on("maskLabel", data => (this.maskLabel = data));
      }
      this.postAjax();
    },
    clearData:function(){
        this.isLoadEnd = false;
        this.pageNum = 1;  
        this.response = [];
    },
    postAjax:function(){
        this.Axios
            .Post(this.URL.getEmpListByService.url, {
              deptCategory: this.selectedName,
              deptDescr: this.maskLabel,
              employeeId: "",
              pageSize:this.pageSize,
              pageNum:this.pageNum,
              name: this.searchValue
            })
            .then(response => {
              this.response = this.response.concat(response.data.datas);
              this.total = response.data.total;
              if (this.total === this.response.length) {
                  this.isLoadEnd = true;
              }
              Bus.$emit("total", this.total);
          
            });
    },
    scrollFunc:function(event) {
        var self = this;
        if (this.searchRecord || this.isLoadEnd) {
            return;
        }
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 
        if(document.documentElement.scrollHeight - (document.documentElement.clientHeight + scrollTop) == 0 ) {
            self.pageNum++;
            self.postAjax();
            // self.getLeaderListCommonAjax();
        }    
    }
  }
};
</script>

<style>
.top-bar {
  vertical-align: top;
  position: relative;
  background-color: #fff;
}

.top-bar .title-con {
  width: 100%;
  overflow-x: auto;

  display: inline-flex;
}
.top-bar .title-con::-webkit-scrollbar {
  display: none;
}

.leader-area .search-area {
  /*display: inline-block;*/
  top: 0;
  right: 0;
  position: absolute;
  height: 1rem;
  width: 1.5rem;
  vertical-align: top;
  background-color: rgba(255, 255, 255, 0.95);
}
.leader-area .top-bar img {
  width: 0.28rem;
  height: 0.28rem;
  margin-top: 0.35rem;
}
.leader-area {
  font-size: 0.28rem;
  /* height: 100%; */
}
.leader-area .mint-tab-item-label {
  margin: auto;
  font-size: 0.32rem;
  font-weight: 600;
}
.leader-area .navbar .tab-item-leader {
  width: 1.6rem;
}
.leader-area .navbar {
  padding-right: 1.5rem;
}
.leader-area .mint-tab-container {
  height: 100%;
  background-color: #f3f3f3;
}
.leader-area .mint-navbar .mint-tab-item.is-selected {
  border-bottom: 0px;
}
.leader-area .mint-spinner-fading-circle {
  margin: 2rem auto;
}
</style>
<style scope="scope">
.leader-area .search-area .fenge-span {
  display: inline-block;
  height: 0.5rem;
  margin-left: 0.5rem;
  margin-top: 0.2rem;
  margin-right: 0.3rem;
  width: 0.1rem;
}
.uint-header {
  clear: both;
  overflow: hidden;
  padding-left: 0.1rem;
  padding-right: 0.2rem;
}
</style>

